<template>
  <div class="layout-page">
    <div class="register">
      <avue-form ref="form" v-model="form" :option="option" @submit="handleSubmit"></avue-form>
      </div>
  </div>
</template>
<script>
  import { register } from "@/api/base"
  export default {
    name: "register",
    data () {
      const validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          callback();
        }
      };
      const valiacc = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入登录标识'));
        } else {
          var length = value.length
          var ac = /^[a-z0-9]+$/
          if (length < 6 || !ac.test(value)) {
            callback(new Error('不少于6位字母+数字'));
          } else{
            callback();
          }
        }
      };
      const validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.form.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        form: {},
        option: {
          submitText: '注册',emptyBtn:false,
          column: [
            {
              label: '登录标识',prop: 'account',
              rules: [{required: true,validator: valiacc,trigger: "blur"}]
            },
             {
              label: '姓名',prop: 'userName',
              rules: [{required: true,message: "请输入",trigger: "blur"}]
            },
            {
              label: '密码',prop: 'password',type:"password",
              rules: [{required: true, validator: validatePass, trigger: 'blur'}]
            },
            {
              label: '确认密码',prop: 'repassword',type:"password",
              rules: [{required: true, validator: validatePass2, trigger: 'blur'}]
            },
            {
              label: '手机号',prop: 'phone',
              rules: [{required: true,message: "请输入",trigger: "blur"}]
            },
            {
              label: '职位',prop: 'position',
              rules: [{required: true,message: "请输入",trigger: "blur"}]
            },           
          ]
        },
      }
    },
    methods: {
      handleSubmit(form, done) {
        let _this=this;
        register(form).then(res =>{
          done();
          if (res.data.success) {
            _this.$alert('恭喜您注册成功，请登录', {
              confirmButtonText: '确定',
              showClose: false,closeOnPressEscape: false,closeOnClickModal: false,
              callback: action => {
                if (action == 'confirm') { 
                  _this.login()
                }
              }
            })
          } else {
            _this.notifyMsg(res.data.msg,'error')
          }
        })
      },
      login: function () {
        // this.$router.push({ path: "/login" });
        this.$parent.isShow = true
      },
      notifyMsg: function (msg, type) {
        this.$notify.error({
          message: msg,
          type: type,
          duration: 1500
        });
      }
    }
  };
</script>

<style lang="scss">
	.layout-page {
		width:100%;
		height:100%;
		// background:url("../../assets/images/bg.png") no-repeat;
		background-size:100% 100%;
	}
  .register {
    padding-top: 100px;
	}

  .register-submit {
    text-align: center;
    width: 80%;
    height: 40px;
    letter-spacing: 2px;
    cursor: pointer;
    -webkit-transition: 0.25s;
    transition: 0.25s;
    background: linear-gradient(160deg, #0b9e9e 20%, #1dbbbb 80%);
    border: 0;
    font-size: 18px;
    border-radius: 20px;
  }
  .el-form-item{
    margin-bottom: 15px;
  }
</style>